<!-- 关联审批控件 -->
<template>
  <a-space
    direction="vertical"
    style="width: 100%"
  >
    <a-input
      v-model="modelValue"
      @click="getData"
    />
  </a-space>
  <a-modal
    v-model:visible="visible"
    class="form-modal"
    width="60%"
    :esc-to-close="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <template #title>
      <h2>关联审批</h2>
    </template>
    <div
      class="meta"
      style="margin-bottom: 10px;"
    >
      <!-- <a-input-search v-model="params.data.cname" @search="getData" :style="{ width: '320px' }" placeholder="请输入审批名称" /> -->
    </div>
    <div class="form-list-content">
      <a-table
        row-key="id"
        :data="contract"
        :row-selection="rowSelection"
        :pagination="pagination"
        v-model:selectedKeys="selectedKeys"
        @select="select"
        @page-change="pageChange($event)"
        @page-size-change="pageSizeChange($event)"
      >
        <template #columns>
          <a-table-column
            title="名称"
            data-index="name"
          ></a-table-column>
          <a-table-column
            title="人员"
            data-index="updatedUserStaffName"
          ></a-table-column>
        </template>
      </a-table>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
import { ref, computed, reactive, onMounted } from 'vue';
import { postBasisFlowSearch } from '@/api/home/System settings/basis-flow';
import { getBasisFlow } from '@/api/order-management/client-management/order';

const emit = defineEmits(['update:oneValue']);
const props = withDefaults(
  defineProps<{
    props: { [propName: string]: any };
    name?: string;
    required?: boolean;
    oneValue: any;
    regex?: {
      [name: string]: {
        role: any;
        name: any;
      };
    };
  }>(),
  {}
);
const visible = ref(false);
const contractNumber = computed(() => {
  return props.oneValue;
});
interface DataType {
  id: number;
  cli_name: string;
}
const contract = ref<DataType[]>([]);
const modelValue = ref<number | string>();
const params = reactive({
  data: {
    pageIndex: 1,
    pageSize: 10,
  },
});
// 数据条数改变时触发
const pageSizeChange = (pageSize: any) => {
  params.data.pageSize = pageSize;
};
// 选择器配置
const rowSelection = reactive({
  type: 'radio',
});
const selectedKeys = ref<any>([]);
selectedKeys.value = [props.oneValue];
interface ItemType {
  item: {
    id: number;
    name: string;
    type: number;
    updatedUserStaffName: string;
  };
}
const selectedObj = reactive<ItemType>({
  item: { id: 0, name: '', type: 0, updatedUserStaffName: '' },
});
const select = (
  rowKeys: (string | number)[],
  d: string | number,
  tableData: any
) => {
  selectedObj.item = tableData;
};
// 分页配置
const pagination = reactive({
  total: 0,
  showTotal: true,
  showJumper: true,
  showPageSize: true,
});
const radioValue = ref(Number(props.oneValue));
const getData = async () => {
  let res = await postBasisFlowSearch(params.data);
  contract.value = res.Data;
  pagination.total = res.Count;
  visible.value = true;
};
//页码改变时触发
const pageChange = (pageIndex: any) => {
  params.data.pageIndex = pageIndex > 1 ? pageIndex : 1;
  getData();
};
const getFlowInfo = async () => {
  if (props.oneValue > 0) {
    selectedObj.item = await getBasisFlow({ id: props.oneValue });
    modelValue.value = selectedObj.item.name;
  }
};
const handleOk = async () => {
  emit('update:oneValue', selectedObj.item.id);
  modelValue.value = selectedObj.item.name;
};
const handleCancel = () => {
  // TODO:
};

onMounted(() => {
  getFlowInfo();
});
</script>

<style scoped lang="less">

</style>
